<script setup>
import { useStore } from "@/store";

const store = useStore()
const props = defineProps({
  orderInfo: {
    type: Object,
    required: ''
  },
  height: {
    type: Number,
    default: 290,
  }
})
const cover = props.orderInfo.shopImgs.split(',').map(v=>baseURL+v)[0]
const navigateTo = ()=>{
  store.setOrderInfo(props.orderInfo)
  uni.navigateTo({ url: '/pages/orders/views/orderInfo' })
}
</script>

<template>
  <view
      :style="{height: props.height+'px'}"
      :class="['orderCard', 'link', {'soldOut': +props.orderInfo.shopStart===1}]"
      @click="navigateTo"
  >
    <van-image
        width="100%"
        height="200px"
        :src="cover"
    />
    <view class="container">
      <view class="name">{{props.orderInfo.shopName}}</view>
      <view class="title" style="font-size: 13px; margin-top: 7px;">
        <span style="color: #ff4400; margin-right: 5px;">即将恢复原价</span>
        <span style="color: #888888">极速退款</span>
      </view>
      <view style="color: red; margin-top: 7px;" class="price">
        <span>￥</span>
        <span style="font-size: 20px; margin-right: 5px;">{{props.orderInfo.shopPrice}}</span>
        <span style="color: #888888;">已拼{{(Math.random()*100|0)}}件</span>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.orderCard {
  position: relative;
  border-radius: 7px;
  overflow: hidden;
  background: #FFFFFF;
  .container{
    padding: 5px;
    .name{
      text-align: center;
    }
    .price{
      margin-right: 10px;
    }
  }
}
.soldOut::after{
  display: block;
  content: '该商品太火爆，已售完';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  color: red;
  font-size: 17px;
  text-align: center;
  line-height: 100px;
  background: rgba(255,255,255,0.3);
}
</style>